<template>
  <h3>原始HTML & 模板指令一：v-pre、v-text、v-html</h3>
  <!-- 
  1. v-pre指令
        1.1 可以保留原始HTML
  2. v-text指令
        2.1 原始HTML{{}} 与 v-text指令等同
        2.2 内部不能写文本或是其它标签，否则会报错
  -->
  <hr />
  <div>
    <p>
      <span v-pre>"原始HTML{{ message }}:"</span>
      {{ message }}
    </p>
    <span v-pre>"文本插值v-text="":"</span>
    <span v-text="message"></span>
  </div>

  <!-- 
  3. v-html指令
        3.1 可以渲染原始HTML，但不推荐使用，因为容易导致XSS攻击
        3.2 内部不可以写文本或是其它标签，会报错
        3.3 v-text指令，{{}}以及模板字符串引用rawhtml变量都不会编译html标签，只会解析变量，v-html指令会编译html标签
-->
  <hr />
  <div>
    <p>Using text interpolation: {{ rawHtml }}</p>
    <p>Using text interpolation-模板字符串: {{ `${rawHtml}` }}</p>
    <p v-text="rawHtml"></p>
    <div>
      Using v-html directive:
      <div v-html="rawHtml"></div>
    </div>
  </div>

  <!-- 4. v-on指令
         3.1 v-on简写形式 @
         3.2 用于定义绑定事件
  -->
  <hr />
  <div>
    <button type="button" :dsiable="isDisabled" v-on:click="changeId">改变isTrue的值</button>
    <button type="button" :dsiable="isDisabled" @click="changeBindId">改变bindId的值</button>
    <div id="commonId">正常绑定id属性</div>
    <div :id="bindId">v-bind:id="dynamicId"</div>
    <div :id="isTrue ? bindId : 'commonId'">v-bind:id="dynamicId"</div>
  </div>




  <h3>JS表达式</h3>
  <!-- 
  js表达式
    1) {{}}、v-指令 都能使用JS表达式
    2) js表达式：基础运算、函数调用、模板字符串、三目条件运算符等
    3) 不支持判别：能否写在return语句中，如条件控制、var a = 1语句等都是不被支持的
  -->

  <hr />
  <div>
    <p>Using text interpolation: {{ rawHtml + '后缀字符串' }}</p>
    <p>Using text interpolation: {{ ` ${rawHtml} 后缀字符串` }}</p>
    <p>Using text interpolation: {{ istrue ? rawHtml : ` ${rawHtml} 后缀字符串false` }}</p>
    <p>Using text interpolation: {{ istrue ? arr.join(',') : ` ${rawHtml} 后缀字符串false` }}</p>
    <p>{{ arr.join(',') }}</p>
    <hr />
    <p v-text="rawHtml + '后缀字符串'"></p>
    <p v-text="` ${rawHtml} 后缀字符串`"></p>
    <p v-text="istrue ? rawHtml : ` ${rawHtml} 后缀字符串false`"></p>
    <p v-text="arr.join(',')"></p>
    <hr />
  </div>

  <hr />

  <h6>绑定多个属性</h6>
  <div v-bind="objectOfAttrs">我是div 我绑定了多个属性</div>

  <hr />
  <h6>可以在绑定的表达式中使用一个组件暴露的方法：</h6>
  <div :id="returnJoinStr()" :class="returnJoinStr()">
    {{ returnJoinStr() }}
  </div>

  <hr />
  <h6>暴露的常用内置全局对象</h6>
  <div>
    const GLOBALS_ALLOWED =
    'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
    'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
    'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol'
  </div>

</template>

<script lang="ts">
export default {
  name: 'Study2StuDemo1'
}
</script>

<script setup lang='ts'>
import { ref } from 'vue'
// 数据
const message = 'Hello Vue3!'
const rawHtml = `
<span style="color:pink">我是定义变量rawHtml</span>
`
const istrue = true
const arr = ['刘长生', '黄嘉辉', '廖文静']


const isDisabled = ref(false)
const isTrue = ref(false)
const bindId = ref('stuId')

// 用于绑定多个属性
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

// 方法
function changeId() {
  isTrue.value = true
}
function changeBindId() {
  bindId.value = 'commonId'
}

function returnJoinStr() {
  let arr3 = ['Stu', 'ui']
  return arr3.join('_')
}
</script>

<style scoped>
#stuId {
  color: blueviolet;
}

#commonId {
  color: red;
}

.Stu_ui {
  color: goldenrod;
}
</style>